/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  Table, TableBody, Text, useTheme, TableHead,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {Each_ZdSetting, tabIBlistCb, useRaftTableViewer, useTableEditor} from "../../hook/useRepTableEditor";


const 量程选=['O2:0~25vol%，CO、H2: 0~10000ppm，NO: 0~3000ppm', ];
const 精度选=['RO2、O2:1.0级，CO:5.0级', '显示精度1/100秒；±0.05s/s' ];
const 项目选=['排烟温度','排烟处烟气分析','入炉冷空气温度','测试开始时间及结束时间', ];
const 仪器选=['表面温度计','烟气分析仪','电子秒表','温度计', ];

export const config挠度=[['测试项目','x',140,tabIBlistCb(项目选)], ['测试仪器','I',110,tabIBlistCb(仪器选,1)],['型号','t',90],
        ['精度','p',140,tabIBlistCb(精度选)], ['量程','R',190,tabIBlistCb(量程选)], ['设备编号','N',100] ] as Each_ZdSetting[];
export const itemA仪表=['测仪表', ];
//测试仪表说明
export const InstrumentDesc =
    React.forwardRef(({ children, show ,alone=true,refWidth,redId,nestMd,label}:InternalItemProps,  ref
    ) => {
      const [getInpFilter]=useMeasureInpFilter(null,itemA仪表, );
      const {inp, setInp} = useItemInputControl({ ref,redId,nestMd });
      const headview=<Text variant="h5">
        {label}
      </Text>;
      const [render部位汇总]=useTableEditor({inp, setInp,  headview,
             config: config挠度, table: '测仪表',  maxRf:3 });
      return (
          <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}  redId={redId} nestMd={nestMd}
                               alone={alone}  label={label!}>
            {render部位汇总}
          </InspectRecordLayout>
      );
  } );


export const InstrumentDescVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const theme = useTheme();
  const [renderRows, renderHead]=useRaftTableViewer(config挠度, orc?.测仪表,1,
                     false, true, true,<Text css={{fontSize: '0.7rem'}}>序号</Text>);
  return <>
    <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}}}>
      <Text id='InstrumentDesc' variant="h2" css={{
        textAlign: 'center', marginTop: '1rem',
      }}>三、测试仪表说明</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["3.4%","16%","11%","11%","21%","%","10%"] }
                css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight miniw={800}>
      <TableHead>
        <RepLink rep={rep} tag={'InstrumentDesc'}>
          {renderHead}
        </RepLink>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={'InstrumentDesc'}>
         {renderRows}
        </RepLink>
      </TableBody>
    </Table>
  </>;
};
